<template>
<div style="background-color: #eee">
  <MyNav style="background-color:#42b983;">修改个人信息</MyNav>
  <div class="cont">
<!--    修改头像-->
    <van-cell is-link @click="showPopup1" >头像
      <div class="pic" style="float: right">
        <van-image
            round
            width="2rem"
            height="2rem"
            :src='$store.state.userInfo.avatar'
            fit="cover"
        />
      </div>
    </van-cell>
    <van-popup v-model="show1">
      <van-uploader :after-read="afterRead"></van-uploader>
    </van-popup>
<!--    <van-divider />-->
<!--    修改昵称-->
    <van-cell is-link @click="showPopup2">用户名
    <div style="float: right">{{$store.state.userInfo.userName}}</div>
    </van-cell>
    <van-popup v-model="show2" style="width: 250px">
      <van-cell-group>
        <van-form @submit="onSubmit1">
          <van-field
              v-model="userName"
              name="nickName"
              label="用户名"
              placeholder="请输入新的用户名"
              :rules="[{ required: true, message: '请填写要修改的用户名' }]"
          />
          <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit" style="color:#67ABD6;font-size: 18px;background-color: #fff;border: 1px solid #67ABD6; ">提交</van-button>
          </div>
        </van-form>
      </van-cell-group>
    </van-popup>
<!--    修改密码-->
<!--    <van-cell is-link @click="showPopup3">修改密码
    </van-cell>
    <van-popup v-model="show3" style="width: 250px">
      <van-cell-group>
        <van-form @submit="onSubmit2">
          <van-field
              v-model="password"
              type="password"
              name="密码"
              label="密码"
              :rules="[{ required: true, message: '请填写修改密码' }]"
          />
          <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit">提交</van-button>
          </div>
        </van-form>
      </van-cell-group>
    </van-popup>-->
<!--  修改性别  -->
    <van-cell is-link title="性别" @click="show = true">
      <div style="float: right" v-if="$store.state.userInfo.sex==0">男</div>
      <div style="float: right" v-else>女</div>
    </van-cell>
    <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
    <!--  修改手机号-->
<!--    <van-cell is-link @click="showPopup4">手机号
      <div style="float: right">{{$store.state.userInfo.phonenumber}}</div>
    </van-cell>
    <van-popup v-model="show4" style="width: 250px">
      <van-cell-group>
        <van-form @submit="onSubmit3">
          <van-field
              v-model="phonenumber"
              name="phoneNumber"
              label="手机号"
              :rules="[{ required: true, message: '请填写要修改的手机号' }]"
          />
          <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit">提交</van-button>
          </div>
        </van-form>
      </van-cell-group>
    </van-popup>-->
  </div>
<!--  退出登录-->
  <van-button type="primary" size="large" @click="logout" color="#67ABD6" plain>退出登录</van-button>
</div>
</template>

<script>
import MyNav from "@/components/MyNav";
import {avatarList, ExitLogin, getUserInfo, setUserInfo,} from "@/api/http";
import {Toast} from "vant";
export default {
name: "MyPerson",
  components:{
  MyNav
  },
  data(){
   return{
     show1: false,
     show2: false,
     // show3: false,
     // show4: false,
     userName: '',
     // password: '',
     // phonenumber:'',
     //性别选择
     show: false,
     actions: [{ name: '女' }, { name: '男' }],
     sex:'',
     islogin:true,
   }
  },
  methods:{
    showPopup1() {
      this.show1 = true;
    },
    showPopup2() {
      this.show2 = true;
    },
    /*showPopup3() {
      this.show3 = true;
    },*/
  /*  showPopup4() {
      this.show4 = true;
    },*/
  //  上传头像
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
      this.show1=false;
      avatarList(file.file).then(res=>{
        console.log(res)
        getUserInfo().then(res=>{
          console.log(res)
          this.$store.commit('changeUserInfo',res.data);
          Toast.success('修改成功！')
        })
      })
    },
  //  修改昵称
    onSubmit1(values) {
      console.log(values);
      this.show2=false
      console.log(values.nickName)
      setUserInfo('userName',values.nickName).then(res=>{
        console.log(res)
        getUserInfo().then(res=>{
          console.log(res)
          this.$store.commit('changeUserInfo',res.data);
          Toast.success('修改成功！')
        })
      })
    },
    //  修改密码
  /*  onSubmit2(values) {
      console.log(values);
      this.show3=false
    },*/
    //  修改手机号
   /* onSubmit3(values) {
      console.log(values);
      this.show4=false;
      setUserInfo('phonenumber',values.phoneNumber).then(res=>{
        console.log(res)
        getUserInfo().then(res=>{
          console.log(res)
          this.$store.commit('changeUserInfo',res.data);
        })
      })
    },*/
  //  修改性别
    onSelect(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show = false;
      console.log(item)
      if(item.name=='男'){
        this.sex=0
      }
      if(item.name=='女'){
        this.sex=1
      }
      setUserInfo('sex',this.sex).then(res=>{
        console.log(res)
        getUserInfo().then(res=>{
          console.log(res)
          this.$store.commit('changeUserInfo',res.data);
          Toast.success('修改成功！')
        })
      })
    },
  //  退出登录
    logout(){
      ExitLogin().then(res=>{
        console.log(res)
        if(res.code==403){
          this.$store.commit('changeUserInfo',{avatar:'',remark:'这个人很懒什么都没写',
            userName:'用户名',
            sex:'男',})
          this.$store.commit('changeLogin',false)
          setTimeout(()=>{
            this.$router.go(-1);
          },100)
          Toast.success('已退出，感谢您的使用')
        }
      })
    },

  },
}
</script>

<style scoped lang="less">
.cont {
  background-color: #fff;
  margin: 10px 5px;
}
/deep/.van-cell__value--alone {
  color: black;
}
/deep/.van-uploader__wrapper {
  width: 80px;
  height: 80px;
}
/deep/.van-uploader__input {
  width: 80px;
}
/deep/.van-uploader__upload {
  margin: 0;
}
</style>